<!--
  Copyright (c) chb my copyright message. 2022-2023. All rights reserved.

  -->

<template>
  <div>
    <div :style="{backgroundImage:'url(' + playlist.coverImgUrl + ')'}" class="playlistDetail">
      <!--  顶部标签  -->
      <van-nav-bar style="background: transparent;z-index: 3;" :border="false">
        <template #left>
          <van-icon name="zuojiantou" class-prefix="iconfont" size="28px" @click="$router.push('/')"></van-icon>
        </template>
        <template #title>
          <span style="color: #edeae6">歌单</span>
        </template>
      </van-nav-bar>
      <van-row justify="center" type="flex" style="margin: 10px;z-index: 3;position: relative">
        <van-col span="7">
          <img :src="playlist.coverImgUrl" alt="" style="width: 100px;height: 100px;border-radius: 10px">
        </van-col>
        <van-col span="17">
          <van-col span="21" style="margin-left: 10px">
            <div>{{ playlist.name }}</div>
            <div v-if="playlist.creator" style="font-size: 12px;margin-top: 10px">
              <img :src="playlist.creator.avatarUrl" style="width: 30px;height: 30px">
              <span style="top: -10px;position: relative">{{ playlist.creator.nickname }}
            <van-tag plain color="#edeae6" style="background: transparent;border-radius: 10px">
              <van-icon name="plus"/>
              关注
            </van-tag></span>
            </div>
            <van-tag plain color="#edeae6" style="background: transparent;border-radius: 10px;margin: 10px 0">
              8.1分
              <van-icon name="arrow"/>
            </van-tag>
          </van-col>
          <van-col span="2">
            <van-tag plain color="#edeae6" style="background: transparent;border-radius: 50%;padding: 4px">
              <van-icon name="arrow-down" size="10px" style="border-radius: 50%"/>
            </van-tag>
          </van-col>
        </van-col>
      </van-row>
      <van-row type="flex" justify="space-around"
               style="margin: 10px;z-index: 3;position: relative;font-size: 12px;font-weight: 300;">
        <van-col span="23"
                 style="-webkit-box-orient: vertical;-webkit-line-clamp: 1;display: -webkit-box;text-overflow: ellipsis;overflow:hidden;">
          {{ playlist.description }}
        </van-col>
        <van-col span="1">
          <van-icon name="arrow"/>
        </van-col>
      </van-row>
      <van-row type="flex" justify="space-around"
               style="position: relative;z-index: 3;height: 30px;padding: 20px 0">
        <van-col span="6" style="text-align: center;line-height: 30px">
          <van-tag color="transparent">
            <van-icon name="share-o" size="20">
              {{ playlist.shareCount }}
            </van-icon>
          </van-tag>
        </van-col>
        <van-col span="6" style="text-align: center;line-height: 30px">
          <van-tag color="transparent">
            <van-icon name="chat-o" size="20">
              {{ playlist.commentCount }}
            </van-icon>
          </van-tag>
        </van-col>
        <van-col span="6" style="text-align: center;background-color: #fc3a3a;line-height: 30px;border-radius: 10px">
          <van-tag color="transparent">
            <van-icon name="credit-pay" size="20">
              {{ playlist.subscribedCount }}
            </van-icon>
          </van-tag>
        </van-col>
      </van-row>
    </div>

    <!--播放全部-->
    <div>
      <van-cell :border="false" style="background: #161616">
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <van-icon name="gf-playCircle" color="#e33536" class-prefix="iconfont" size="24">
            <span style="color:#edeae6;margin: 0 5px;font-size: 20px">播放全部</span>
            <span style="color:#edeae6;font-weight: 200;font-size: 10px">({{ playlist.trackCount }})</span>
          </van-icon>
        </template>
        <template #right-icon>
          <van-icon name="xiazaidaoru" color="#edeae6" class-prefix="iconfont" size="24" style="margin: 0 10px"/>
          <van-icon name="shebeiguanli" color="#edeae6" class-prefix="iconfont" size="24"/>
        </template>
      </van-cell>
      <div style="background: #161616">
        <van-row v-for="(item,index) in playlist.tracks" :key="index" type="flex" align="center"
                 style="padding: 10px 0" @click="gotoMusicPlayBack(item.id)">
          <van-col span="2" style="text-align: center;color: #808080;font-size: 20px;font-weight: 600;">{{
              index + 1
            }}
          </van-col>
          <van-col span="19" style="margin-left: 12px">
            <div style="color:#edeae6 ">{{ item.name }}</div>
            <div style="font-size: 12px;color:#808080;">
              <span>{{ item.ar[0].name }}</span>
              <span>- {{ item.name }}</span>
            </div>
          </van-col>
          <van-col span="2">
            <van-icon name="gengduo-shuxiang" class-prefix="iconfont" size="28px" color="#808080"></van-icon>
          </van-col>
        </van-row>
      </div>

    </div>
  </div>

</template>

<script>
import {getPlayListDetail, getPlayListDetailDynamic} from "../../api/playlist";

export default {
  name: "playlistDetail",
  data() {
    return {
      id: this.$route.query.id,
      playlist: [],
      privileges: []
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      getPlayListDetail(this.id).then(res => {
        this.playlist = res.data.playlist
        this.privileges = res.data.privileges
      })
      getPlayListDetailDynamic(this.id).then(res => {
        console.log(res)
      })
    },
    // 跳转到歌曲详情
    gotoMusicPlayBack(id) {
      this.$router.push({name: 'musicPlayBack', query: {id: id}})
    }
  }
}
</script>

<style scoped lang="scss">
.playlistDetail {
  color: #edeae6;
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-repeat: no-repeat;
  background-size: cover;
}

.playlistDetail:before {
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  filter: blur(1px);
  background: inherit;
  top: 0;
  left: 0;
  z-index: 2;
}
</style>
